<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id='canvasElem'>
        你的浏览器不支持Canvas，请升级浏览器
    </canvas>
    <script>
        (function() {
            var canvas = document.getElementById('canvasElem');
            var context = canvas.getContext('2d');
            canvas.width = 900;
            canvas.height = 900;
            canvas.style.border = '1px solid #000';

            canvas.onmousedown = function(e) {
                canvas.onmousemove = function(event) {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    context.beginPath();
                    context.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
                    context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
                    context.stroke();
                };
            };
        }());
    </script>
</body>

</html>